<template>
	<view class="">

		<view class="list">
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					所属品牌
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right" >
					<!-- <input class="input-r" type="text" placeholder="请选择所属品牌" placeholder-class="placeholder-class"
						v-model="brandId" /> -->
					<Uselect class="input-r" v-model="dataform.brandId" :list="brandList" keyName="realname" keyId="id"
						@uchange="uchange" @inChange="getBrandList" placeholder="请输入品牌名称" :name="brandName" />
				</view>

			</view>
			<!-- 品牌类别 -->
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					品牌类别
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right" @click="openPicker('businessId')">
					<input class="input-r" type="text" placeholder="请填写品牌类别" placeholder-class="placeholder-class"
						v-model="businessId" />
				</view>
			</view>
			<!-- <view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					加盟信息
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="text" placeholder="请填写加盟信息" placeholder-class="placeholder-class"  v-model="dataform.description" />
				</view>
			</view> -->
			<!-- 联系人 -->
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					联系人
				</view>
				<view class="add-icon" @click="toPage('/pages/releases/addShopContact/addShopContact')">
					<image src="../static/images/add_icon.png" mode=""></image>
				</view>
			</view>
			<view class="item">
				<view class="contact-list">
					<view class="acea-row row-middle row-between contact-p" v-for="(item,index) in contactList"
						:key="item.id">
						<view class="acea-row row-middle row-between contact-r">
							<view class="add-icon" @click="deleteContact(index)">
								<image src="../static/images/sub_icon.png" mode=""></image>
							</view>
							<view class="name">{{ item.username }}</view>
							<view class="gray-text">
								{{ item.type == 1 ? '老板' : ( item.type == 2 ? '房东' : '雇员') }}
							</view>
							<view class="gray-text"
								@click="toPage('/pages/releases/addShopContact/addShopContact?info='+JSON.stringify(item) + '&infoIndex='+index)">
								{{ item.phone }}
							</view>
						</view>
						<view class="acea-row row-middle check-box">
							<image src="../static/images/checkbox_on.png" mode="" v-if="item.status == 1"
								@click="item.status = 0"></image>
							<image src="../static/images/checkbox_no.png" mode="" v-if="item.status == 0"
								@click="item.status = 1"></image>
							<text>公开</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 加盟要求 -->
			<view class="module">
				<view class="acea-row row-middle row-between">
					<view class="module-title">
						加盟要求
					</view>
					<view class="add-advantage red-sanjiao-r" @click="addAd">
						没找到合适的？选择自定义
					</view>
				</view>
				<view class="acea-row advantage-list">
					<view class="itemBox" v-for="(item,index) in advantages" :key="index">
						<icon type="cancel" color="#000" size="14" @click="closeAdvantages(item,index)" class="close" />
						<view class="item" :class="advantageIds.indexOf(item)!=-1?'item-on':''"
							@click="advantageChecked(item,index)">{{item}}</view>
					</view>
				</view>
			</view>
			<!-- 备注 -->
			<view class="module">
				<view class="module-title">
					申请信息
				</view>
				<view class="textacea-box">
					<textarea placeholder="请输入申请信息" v-model="dataform.description" :maxlength="maxLength"></textarea>
					<view class="num-text">
						{{dataform.description.length}}/{{maxLength}}
					</view>
				</view>
			</view>
		</view>

		<view class="submit-btn" @click="handleComfrim">
			立即申请
		</view>
		<u-picker :show="pickerShow" :columns="columns" @cancel="pickerShow=false" @confirm="confirm" :keyName="keyName"
			:defaultIndex="defaultIndex"></u-picker>
		<addKeyWord ref="addKeyWord" @addConfirm="addConfirm" />
	</view>
</template>

<script>
	import {
		getBrandListApi,
		getApplyAddApi
	} from '@/api/brand/index.js';
	import addKeyWord from '../components/addKeyWord/addKeyWord.vue'
	import Uselect from '@/pages/releases/components/select.vue';
	import {
		toPage,
		getLocation
	} from '@/filters/commFilter.js'
	export default {
		components: {
			addKeyWord,
			Uselect
		},
		props: {
			brandType: {
				type: Array,
				default: () => []
			}
		},
		watch: {
			brandType(val) {
				console.log(val)
			}
		},
		data() {
			return {
				maxLength: 200,
				contactList: [],

				dataform: {
					description: ''
				},
				pickerType: '',
				columns: [],
				keyName: '',
				defaultIndex: [0],
				pickerShow: false,
				brandList: [],
				brandId: '', //所属品牌名称
				businessId: '',
				advantages: [], //加盟要求
				advantageIds: [],
			}
		},
		mounted() {
			this.getBrandList("");
			let that = this;
			uni.$on('contact', function(data) {

				if (that.contactList.findIndex(item => item.phone == data.phone) == -1) {
					that.contactList.push({
						...data,
						status: 0
					});
				}

			})
			uni.$on('upContact', function(data) {
				that.contactList.splice(data.index, 1, data.info)
			})
			uni.$on('initContact', function(data) {
				if (that.contactList.length < 1) {
					that.contactList.push(data)
				}
			})
			getApp().globalData.initContact()
		},
		methods: {
			toPage,
			//添加店铺优势
			addAd() {
				this.$refs.addKeyWord.popupShow = true
			},
			addConfirm(e) {
				this.advantages=this.advantages.concat(e)
			},
			//删除标签
			closeAdvantages(item, index) {
				this.advantages.splice(index, 1)
				if (this.advantageIds.indexOf(index) != -1) {
					let idx = this.advantageIds.indexOf(index)
					this.advantageIds.splice(idx, 1);
				}
			},
			uchange(d) {
		
			},
			advantageChecked(item) {
				if (this.advantageIds.indexOf(item) != -1) {
					let idx = this.advantageIds.indexOf(item);
					this.advantageIds.splice(idx, 1);
				} else {
					this.advantageIds.push(item);
				}
			},
			//删除联系人
			deleteContact(index) {
				this.contactList.splice(index, 1)
			},
			//获取品牌列表
			async getBrandList(realname) {
				try {
					let res = await getBrandListApi({
						limit: 8,
						realname
					});
					this.brandList = res?.data.list
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			//打开选择器
			openPicker(params) {
				this.pickerType = params
				switch (params) {
					case 'brandId':
						this.columns = [
							this.brandList
						];
						this.keyName = 'realname';
						this.defaultIndex = [0]
						break;
					case 'businessId':
						this.columns = [
							this.brandType
						];
						this.defaultIndex = [0]
						this.keyName = 'name';
						break;
					default:
						this.columns = []
				}
				this.pickerShow = true;
			},
			//picker点击确认
			confirm(e) {
				this.dataform[this.pickerType] = e.value[0].id
				this[this.pickerType] = e.value[0][this.keyName]
				this.pickerShow = false;
			},
			//提交表单
			handleComfrim() {
				let that = this
				this.dataform.contacts = (this.contactList.map(item => {
					return {
						contactId: item.id,
						open: item.status,
						identity: item.type
					}
				}))
				if (!this.dataform.contacts) return that.$util.Tips({
					title: '请添加联系人'
				});
				this.ApplyAdd()
			},
			//添加加盟信息
			async ApplyAdd() {
				try {
					this.dataform = {
						...this.dataform,
						...this.$location,
						kewords: this.advantageIds.join(',')
					}
					let res = await getApplyAddApi(this.dataform);
					this.$util.Tips({
						title: res.message
					})
					uni.navigateTo({
						url: '/pages/releases/job/job'
					})
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';
</style>